<template>
  <div>
    <div class="content">
      <My-Title :title="Title"></My-Title>

      <div class="m-card-box1">

        <div class="m-card">
          <div class="name">{{ '车籍地' }}</div>
          <div class="value">{{ info.vehicleNative }}</div>
        </div>
        <!-- <div class="m-card">
          <div class="name">{{ '结构类型' }}</div>
          <div class="value">{{ info.structType }}</div>
        </div> -->
        <div class="m-card">
          <div class="name">{{ '车辆类型' }}</div>
          <div class="value">{{ info.vehicleType }}</div>
        </div>

        <div class="m-card">
          <div class="name">{{ '额定载货量' }}</div>
          <div class="value">{{ info.limitLoad }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '总质量/准牵引总质量' }}</div>
          <div class="value">{{ info.towWeight }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '出厂时间' }}</div>
          <div class="value">{{ info.outTime }}</div>
        </div>

        <!-- <div class="m-card">
          <div class="name">{{ '发动机企业' }}</div>
          <div class="value">{{ info.engineCompany }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '发动机编号' }}</div>
          <div class="value">{{ info.engineNo }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '发动机型号' }}</div>
          <div class="value">{{ info.engineModel }}</div>
        </div>
        <div class="m-card">
          <div class="name">{{ '车辆生产厂家' }}</div>
          <div class="value">{{ info.vehicleProductor }}</div>
        </div> -->
        <div class="m-card">
          <div class="name">{{ '车辆品牌' }}</div>
          <div class="value">{{ info.vehicleBand }}</div>
        </div>
         <div class="m-card">
          <div class="name">{{ '车辆型号' }}</div>
          <div class="value">{{ info.vehicleModel }}</div>
        </div>
      </div>
      <div class="sub-title">{{ '常跑企业' }}</div>

      <div class="m-card-box" style="height: 45px;" v-for="(item, index) in formTo" :key="`to-${index}`">
        <div class="address" style="padding-left: 20px">{{ item.origin }}</div>
        <img class="img" :src="IconMJiantou" alt="">
        <div class="address">{{ item.destination }}</div>
        <div class="pro">{{ item.ratio * 100 }}%</div>
      </div>
      <div class="m-card-box" style="height: 45px;text-align: center" v-if="formTo.length === 0">
        <div style="width: 100%;">暂无数据</div>
      </div>

    </div>
  </div>
</template>

<script>
import MyTitle from '@/components/MyModal/title'
import IconCarOut1 from '@/assets/images/carOut-1.svg'
import IconCarOut2 from '@/assets/images/carOut-2.svg'
import IconCarOut3 from '@/assets/images/carOut-3.svg'
import IconMJiantou from '@/assets/images/m-jiantou.png'
import * as echarts from 'echarts'
import { getCarCityPoints, getCarImage, getCarImageFromTo } from "@/api/largescreen"
import { mapState, mapActions, mapMutations } from 'vuex'
import * as dayjs from 'dayjs'

const Levels = [
  '偏低', '一般', '较高', '超高'
]
const Opt = {
  polar: {
    radius: ['88%', '100%'],
    center: ['50%', '50%'],
  },
  angleAxis: {
    max: 100,
    clockwise: false,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    splitLine: {
      show: false,
    },
  },
  radiusAxis: {
    type: 'category',
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      type: 'liquidFill',
      radius: '90%',
      center: ['50%', '50%'],
      outline: {
        show: false,
      },
      backgroundStyle: {
        color: '#00000000',
      },
      data: [
        {
          value: 0,
          direction: 'left',
          itemStyle: {
            normal: {
              color: '#00ffff99'
            }
          }
        },
        {
          value: 0,
          direction: 'left',
          itemStyle: {
            normal: {
              color: '#00ffff66'
            }
          }
        }
      ],
      label: {
        normal: {
          formatter(row) {
            let val = (row.value * 100).toFixed(0)
            return `${val}%`
          },
          textStyle: {
            fontSize: 16,
            color: '#fff'
          }
        }
      }
    },
    {
      name: '',
      type: 'bar',
      roundCap: true,
      z: 2,
      showBackground: true,
      backgroundStyle: {
        color: '#00ffff66',
      },
      data: [0],
      coordinateSystem: 'polar',
      itemStyle: {
        normal: {
          color: '#00ffff',
        }
      },
    }
  ]
}

export default {
  name: "CarImage",
  components: {
    MyTitle
  },
  data() {
    return {
      IconMJiantou,
      Title: '基本信息',
      Levels,
      list: [
        {
          icon: IconCarOut1,
          name: '活动频率',
          el: 0,
          num: 0,
          ref: 'outtimes'
        },
        {
          icon: IconCarOut2,
          name: '排放系数',
          el: 0,
          num: 0,
          ref: 'outqd'
        },
        {
          icon: IconCarOut3,
          name: '累计排放',
          el: 0,
          num: 0,
          ref: 'outxs'
        }
      ],
      formTo: [],
    }
  },
  props: {
    info: {
      type: Object,
      default: {}
    }
  },

  mounted() {
    // this.initRender()
  },
  watch: {
    'info': {
      handler: function (val, oldval) {
      },
      immediate: true
    }
  },
  methods: {
    initRender() {
      this.echart1 = new echarts.init(this.$refs.outtimes[0]) // document.querySelector('#outtimes')
      let opt1 = this.getOpt(0)
      this.echart1.setOption(opt1)

      this.echart2 = new echarts.init(this.$refs.outqd[0]) // document.querySelector('#outqd')
      let opt2 = this.getOpt(0)
      this.echart2.setOption(opt2)

      this.echart3 = new echarts.init(this.$refs.outxs[0]) // document.querySelector('#outxs')
      let opt3 = this.getOpt(0)
      this.echart3.setOption(opt3)
    },
    getOpt(num = 0) {
      let opt = Opt
      let pro = (num / 100).toFixed(2)
      opt.series[0].data = [
        {
          value: pro,
          direction: 'left',
          itemStyle: {
            normal: {
              color: '#00ffff99'
            }
          }
        },
        {
          value: (pro - 0.1),
          direction: 'left',
          itemStyle: {
            normal: {
              color: '#00ffff66'
            }
          }
        }
      ]
      opt.series[1].data = [num]
      return opt
    },
    strReplace(num) {
      return '高于{num}%同类车辆'.replace('{num}', num)
    },
    getCarImage() {
      // console.log(this.info)
      if (!this.info.plateNo) {
        return false
      }
      getCarImage({
        plateNo: this.info.plateNo
      }).then(res => {
        if (res.code === '00000') {
          // console.log(res.data)
          this.list[0].num = res.data.activityFrequencyInSameClass
          this.list[0].el = res.data.activityNtile
          this.list[1].num = res.data.emissionFactorInSameClass
          this.list[1].el = res.data.emissionFactorNtile
          this.list[2].num = res.data.emissionIntensityInSameClass
          this.list[2].el = res.data.emissionNtile

          let opt1 = this.getOpt(this.list[0].num)
          this.echart1.setOption(opt1)

          let opt2 = this.getOpt(this.list[1].num)
          this.echart2.setOption(opt2)

          let opt3 = this.getOpt(this.list[2].num)
          this.echart3.setOption(opt3)
        }
      })
      getCarImageFromTo({
        plateNo: this.info.plateNo,
        limit: 3
      }).then(res => {
        if (res.code === '00000') {
          this.formTo = res.data || []
        }
      })
      this.GetCarCityPoints({
        plateNo: this.info.plateNo,
        limit: 2
      }).then(res => {
        console.log(res, 'GetCarCityPoints')
      })
      // this.GetCarTotalLocus({
      //   plateNo: this.info.plateNo,
      // }).then(res => {
      //   console.log(res, 'GetCarTotalLocus')
      // })
    },
    // 15天轨迹
    getPrev15DayLine() {
      let stTime = dayjs.default().subtract(15, 'day').format('YYYY-MM-DD HH:mm:ss')
      let endTime = dayjs.default().startOf('D+1').format('YYYY-MM-DD HH:mm:ss')
      this.GetLocusLinesGeo({
        plateNo: this.info.plateNo,
        stTime,
        endTime
      }).then(res => {
        let data = gcoord.transform(res, gcoord.WGS84, gcoord.GCJ02)
        console.log(data, 'data')
        this.SET_PREV15DAYLINE(data)
      })
    },
    getPrev15DayPoint() {
      let stTime = dayjs.default().subtract(15, 'day').format('YYYY-MM-DD HH:mm:ss')
      let endTime = dayjs.default().startOf('D+1').format('YYYY-MM-DD HH:mm:ss')
      this.GetCarHistoryPointsGeo({
        plateNo: this.info.plateNo,
        stTime,
        endTime
      }).then(res => {
        let data = gcoord.transform(res, gcoord.WGS84, gcoord.GCJ02)
        this.SET_PREV15DAYPOINTS(data)
      })
    }
  }
}

</script>

<style scoped lang="scss">
.content {
  position: absolute;
  left: 100px;
  top: 0;
  padding: 25px 20px 20px 40px;
  width: calc(100% - 100px);

  .m-card-box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 81px;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #050e2399;
    border: 1px solid;
    border-image: linear-gradient(90deg,
        #00000000 0%,
        #00fff411 25%,
        #00fff455 50%,
        #00fff411 75%,
        #00000000 100%) 1;
    margin-top: 20px;
    padding: 0 20px;

    img.icon {
      width: 41px;
      height: 41px;
    }

    .name {
      font-size: 20px;
      color: #ffffff;
    }

    .el-box {
      width: 75px;
      height: 25px;

      .item {
        display: inline-block;
        width: 13px;
        height: 25px;
        background: #00ffff11;
        margin-right: 5px;

        &.active:nth-child(1) {
          background: #00ffff;
        }

        &.active:nth-child(2) {
          background: #00b4ff;
        }

        &.active:nth-child(3) {
          background: #eeb325;
        }

        &.active:nth-child(4) {
          background: #f95454;
        }
      }
    }

    .level {
      font-size: 20px;

      &.active-1 {
        color: #00ffff;
      }

      &.active-2 {
        color: #00b4ff;
      }

      &.active-3 {
        color: #eeb325;
      }

      &.active-4 {
        color: #f95454;
      }
    }

    .echart {
      width: 60px;
      height: 60px;
    }

    .val {
      width: 120px;
      font-size: 14px;
      color: #fdfdfd;
    }

    /*第二块*/
    .address {
      color: #fdfdfd;
      font-size: 18px;
    }

    .img {
      width: 84px;
      height: 15px;
    }

    .pro {
      width: 120px;
      font-size: 16px;
      color: #00ffff;
      text-align: right;
    }

    /*第三块*/
    .addr-point {
      color: #effafb;
      font-size: 20px;

      .dot {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: #00ffff;
        border-radius: 20px;
        margin-right: 10px;
      }
    }
  }

  .sub-title {
    color: #00ffff88;
    font-size: 20px;
    margin-top: 20px;
  }
}

.m-card-box1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: center;
  overflow-x: hidden;
  overflow-y: scroll;

  .m-card {
    width: 246px;
    height: 80px;
    margin-top: 20px;
    background: #050e2399;
    border: 1px solid;
    border-image: linear-gradient(90deg,
        #00000000 0%,
        #00fff411 25%,
        #00fff455 50%,
        #00fff411 75%,
        #00000000 100%) 1;
    text-align: center;

    .name {
      font-size: 21px;
      color: #07c8d1;
      height: 40px;
      line-height: 50px;
      white-space: nowrap;
    }

    .value {
      font-size: 21px;
      color: #f6f6f6;
      height: 40px;
      line-height: 30px;
      white-space: nowrap;
    }
  }
}
</style>
